<template>
  <div>
    <p>{{this.list}}</p>
    <h1>获取信息列表</h1>
    <el-button type="primary" @click="postServer">获取信息</el-button>
    <!-- ---------------------------------------------------------------------------- -->
    <el-button type="primary" @click="add">新增</el-button>

    <el-dialog title="新增信息" :visible.sync="dialogForm">
      <el-form :model="form">
        <el-form-item label="时间" :label-width="formLabelWidth">
          <el-input v-model="form.date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="id" :label-width="formLabelWidth">
          <el-input v-model="form.ID" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="form.sex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm = false">取 消</el-button>
        <el-button type="primary" @click="xinzeng">确 定</el-button>
      </div>
    </el-dialog>
<!-- --------------------------------------------------------------------------------- -->
    <el-input
      style="width:200px;margin:0 10px"
      placeholder="请输入搜索的姓名"
      @keyup.Enter="sousuo"
      v-model="input"
      clearable
    ></el-input>
    <el-button type="primary" @click="sousuo">搜索</el-button>

    <el-table
      :data="tableData"
      style="width: 80%;height: 314px;overflow-y: scroll;margin:10px auto"
    >
      <el-table-column label="日期" width="130">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>

      <el-table-column label="ID" width="130">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.ID }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="姓名" width="130">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="性别" width="130">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.sex }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.sex }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="地址">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.address }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="exit(scope.$index)">编辑</el-button>
          <!-- ------------------------------------------------------------------ -->
          <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="时间" :label-width="formLabelWidth">
                <el-input v-model="form.date" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="id" :label-width="formLabelWidth">
                <el-input v-model="form.ID" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="性别" :label-width="formLabelWidth">
                <el-input v-model="form.sex" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button  type="primary" @click="queding()">确 定</el-button>
            </div>
          </el-dialog>
          <!-- ----------------------------------------------------------------------------------- -->
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <el-pagination
      background
      style="width: 80%;height: 50px;margin:20px auto;"
      layout="prev, pager, next"
      :total=1000
    ></el-pagination> -->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      list: "/zsgc/huoqu",
      tableData: [],
      page: 10,
      input: "",
      dialogFormVisible: false,
      dialogForm: false,
      form: {
        index:'',
        name: "",
        date: "",
        ID: "",
        name: "",
        sex: "",
        address: ""
      },
      formLabelWidth: "120px"
    };
  },
  methods: {
    // handleEdit(index, row) {
    //   this.$prompt("请输入邮箱", "提示", {}).then(()=>{
    //     console.log('确定')
    //   }).catch(()=>{
    //     console.log('取消')
    //   });
    // },
    exit(index){
      this.dialogFormVisible=true
      console.log(index)
      // console.log(this.tableData[index].name)
      this.form.index = index
      this.form.date = this.tableData[index].date
      this.form.ID = this.tableData[index].ID
      this.form.name = this.tableData[index].name
      this.form.sex = this.tableData[index].sex
      this.form.address = this.tableData[index].address
    },
    queding() {
      var index = this.form.index
      this.dialogFormVisible = false;
      console.log(this.tableData[0].name)
      // console.log(index)
      this.tableData[index].name = this.form.name
      this.tableData[index].sex = this.form.sex
      this.tableData[index].address = this.form.address
      //  console.log(this.tableData[index].name)
      // var arr = 
      //   {
      //     name:this.form.name,
      //     date:this.form.date,
      //     ID:this.form.ID,
      //     name:this.form.name,
      //     sex:this.form.sex,
      //     address:this.form.address,
      //   }
      //   console.log(arr)
      // console.log(index);
      // console.log(y);
    },
    add(){
     
      this.dialogForm = true
    },
    xinzeng(){
            this.dialogForm = false
            var arr = 
        {
          name:this.form.name,
          date:this.form.date,
          ID:this.form.ID,
          name:this.form.name,
          sex:this.form.sex,
          address:this.form.address,
        }
      this.tableData.push(arr)
       this.form.date = ''
      this.form.name = ''
      this.form.ID = ''
      this.form.sex = ''
      this.form.address = ''
        },
    handleDelete(index) {
      console.log(index)
      this.tableData.splice(index, 1);
    },
    postServer() {
      this.tableData = [];
      axios.post("/news/add/").then(res => {
        this.tableData.push(...res.data.userInfo);
        this.page = res.data.page;
      });
    },
    sousuo() {
      // console.log(this.tableData);
      // this.tableData.forEach((items)=>{
      //     var list = [];
      //     if(items.name.indexOf(this.input)!=-1){
      //         this.tableData = [];
      //         this.tableData.push(items)
      //     }
      // })
      this.tableData = this.tableData;
      var list = [];
      this.tableData.forEach(items => {
        if (items.name.indexOf(this.input) != -1) {
          list.push(items);
        }
      });
      this.tableData = list;
      console.log(list);
      // if(list = !undefined){
      //   this.tableData = list
      //   }else{
      //   console.log('list为空')
      // }
    }
  }
};
</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #7d7d7d;
  float: right;
  padding-right: 15px;
  margin-top: 10px;
}
h1 {
  padding-top: 50px;
  text-align: center;
  overflow: hidden;
}
</style>